import React, { useRef, useState, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import { Radio } from 'antd';
import XLSX from 'xlsx';
import moment from 'moment';
import style from '@/pages/IndexPage.css';

let data = [];
for (let i = 0; i < 10; i++) {
    data.push({ title: `制冷主机${i + 1}#`, value: Math.round(10 + Math.random() * 10) })
}

function MachAlarmRank({ }) {
    const [chartType, setChartType] = useState('bar');
    let echartsRef = useRef();
    let seriesData = [];
    let categoryData = [], valueData = [];

    // 按预警和告警值的累加值倒序排列
    data.forEach((item) => {
        categoryData.push(item.title);
        valueData.push(item.value);
    });
    
    seriesData.push({
        type: chartType,
        barWidth: 6,
        name: '告警次数',
        data: valueData,
        itemStyle: {
            color: '#ff7d00',
        },
    });
        

    return (
        
                <ReactEcharts
                    ref={echartsRef}
                    style={{ height: '100%' }}
                    notMerge={true}
                    option={{
                        tooltip: {
                            trigger: 'axis',
                        },
                        
                        grid: {
                            top: 30,
                            left: 20,
                            right: 60,
                            bottom: 10,
                            containLabel: true,
                        },
                        dataZoom: [
                            {
                                type: 'slider',
                                show: true,
                                
                                right: '20px',
                                yAxisIndex: [0],
                                startValue: 0,
                                endValue: 6,
                            },
                        ],
                        xAxis: {
                            type: 'value',
                            position: 'top',
                            silent: false,
                            name: '次',
                            minInterval: 1,
                            splitLine: {
                                show: false,
                            },
                            splitArea: {
                                show: false,
                            },
                            axisLabel: {
                                show: true,
                                color: 'rgba(0, 0, 0, 0.65)',
                            },
                            axisTick: { show: false },
                            axisLine: { show: true, lineStyle: { color: '#f0f0f0' } },
                        },
                        yAxis: {
                            type: 'category',
                            data: categoryData,
                            inverse: true,
                            splitArea: {
                                show: false,
                            },
                            splitArea: {
                                show: false,
                            },
                            axisLine: { show: false },
                            axisTick: { show: false },

                            axisLabel: {
                                show: true,
                                color: 'rgba(0, 0, 0, 0.65)',
                            },
                        },
                        series: seriesData,
                    }}
                />
        
    );
}

export default React.memo(MachAlarmRank);
